<template>
    <div class="wap-foot">
        <div class="bottom-box">
            <div class="letf-box">
                <div class="box-item">

                    <div @click="handleSel(1)">
                        <a href="/">      <img src="../../../../assets/images/img-m/分享推荐-m.png" alt="" class="recommend-png">
                            <p class="text">推荐</p></a>
                  
                    </div>
                </div>
                <div class="box-item" @click="handleSel('following')">
                    <div>
                        <img src="../../../../assets/images/img-m/用户关注.png" alt="" class="recommend-png">
                        <p class="text">关注</p>
                    </div>
                </div>
            </div>
            <div class="middle">
                <div class="search-box" @click="handleSel(3)">
                    <div class="white-bg">
                        <div class="round">
                            <img src="../../../../assets/images/img-m/搜索.png" alt="" class="search-png">
                        </div>
                        <p class="text">搜索</p>
                    </div>
                </div>

            </div>
            <div class="letf-box">
                <div class="box-item" @click="handleSel(4)">
                    <div>
                        <img src="../../../../assets/images/img-m/上传 .png" alt="" class="Upload-png">
                        <p class="text">上传</p>
                    </div>
                </div>
                <div class="box-item" @click="handleSel('Mypage')">
                    <div>
                        <img src="../../../../assets/images/img-m/我的.png" alt="" class="MY-png">
                        <p class="text">我的</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter()

const handleSel = (key) => {
    console.log(key);



    if (key === 'Mypage') {
        router.push({
            path: '/Mypage/' + key
        })

    } else {
        router.push({
            path: '/IndividualCenter/' + key
        })

    }

}

// const menuItems = ref([
//     { key: 'works', label: '我的作品', type: '笔' },
//     { key: 'notifications', label: '消息通知', type: '消息' },
//     { key: 'following', label: '我的关注', type: '关注' },
//     { key: 'likes', label: '我的点赞', type: '心点赞' },
//     { key: 'collections', label: '我的收藏', type: '收藏' },
//     { key: 'downloads', label: '下载记录', type: '下载2' },
//     { key: 'BrowsingHistory', label: '浏览记录', type: '眼睛' }
// ])

// // 3. 组件映射
// const componentMap = {
//     works: Mywork,
//     notifications: notification,
//     following: Myattention,
//     likes: Mypraise,
//     collections: MyCollect,
//     downloads: DownloadRecord,
//     BrowsingHistory: MyBrowsingHistory
// }








</script>

<style lang="less" scoped>
.wap-foot {
    position: fixed;
    bottom: 0px;
    left: 0;
    width: 100%;
    z-index: 100;

    .bottom-box {
        width: 100%;
        height: 80px;
        background-color: var(--color-bg);
        display: flex;
        justify-content: space-between;
        box-shadow: var(--color-foot-shadow);

        .text {
            color: var(--color-text);
        }

        .letf-box {
            width: 40%;
            display: flex;
            justify-content: space-around;
            // border: 1px solid salmon;

            .box-item {
                width: 40%;

                text-align: center;
                font-size: 16px;
                display: grid;
                justify-content: center;
                align-items: center;


                .recommend-png {
                    width: 20px;
                    height: 24px;
                }

                .Upload-png {
                    width: 25px;
                    height: 20px;

                }

                .MY-png {
                    width: 25px;
                    height: 25px;
                }





            }


        }

        .middle {
            width: 20%;
            display: grid;
            justify-content: center;
            align-items: center;
            text-align: center;

            .search-box {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                margin: 0 auto;
                position: relative;
                bottom: 28px;
                background-color: var(--color-bg);
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: var(--color-foot-shadow);

                .white-bg {
                    width: 60px;
                    height: 40px;
                    // border: 1px solid red;
                    background-color: var(--color-bg);
                    position: relative;
                    top: 8px;

                    .text {
                        color: var(--color-text);
                        font-size: 16px;
                    }


                    .round {
                        width: 45px;
                        height: 45px;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background-color: var(--color-bg-3b);
                        position: relative;
                        bottom: 10PX;
                        left: 8px;

                        .search-png {
                            width: 25px;
                            height: 25px;
                        }
                    }
                }




            }

            .search-box::before {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 50%;
                /* 覆盖下半部分 */
                background-color: transparent;
                /* 或者设置成你想要的背景色 */
                z-index: 1;
            }


        }


    }
}
</style>